import React, { Component } from 'react'
import { NavLink } from "react-router-dom"
import "./index.less"
import { Switch, Route } from "react-router-dom"

//引入导航图片
import home_n from "../../assets/img/home_n.png";
import home_y from "../../assets/img/home_y.png";
import cate_n from "../../assets/img/cate_n.png";
import cate_y from "../../assets/img/cate_y.png";
import shop_n from "../../assets/img/shop_n.png";
import shop_y from "../../assets/img/shop_y.png";
import mine_n from "../../assets/img/mine_n.png";
import mine_y from "../../assets/img/mine_y.png";
import Home from "../Home/Home"
import Cate from "../Cate/Cate"
import Shop from "../Shop/Shop"
import Mine from "../Mine/Mine"


export default class index extends Component {
  render() {
    let { location: { pathname } } = this.props
    return (
      <div className='index'>
        {/* 二级路由出口 */}
        <Switch>
          <Route path="/index/home" component={Home}></Route>
          <Route path={"/index/cate"} component={Cate}></Route>
          <Route path={"/index/shop"} component={Shop}></Route>
          <Route path={"/index/mine"} component={Mine}></Route>
        </Switch>


        {/* 底部导航 */}
        <footer>
          <NavLink activeClassName='active' to="/index/home">
            {/* 查看地址是否相同 */}
            <img src={pathname == "/index/home" ? home_y : home_n} alt="" />
          </NavLink>
          <NavLink activeClassName="active" to="/index/cate">
            <img src={pathname === "/index/cate" ? cate_y : cate_n} alt="" />
          </NavLink>
          <NavLink activeClassName="active" to="/index/shop">
            <img src={pathname === "/index/shop" ? shop_y : shop_n} alt="" />
          </NavLink>
          <NavLink activeClassName="active" to="/index/mine">
            <img src={pathname === "/index/mine" ? mine_y : mine_n} alt="" />
          </NavLink>
        </footer>
      </div>
    )
  }
}
